import React, { Component } from 'react';
//本地图片必须import导入, 才能使用
import logo from '../imgs/tu1.png'
import logo2 from '../imgs/tu2.png'
import logo3 from '../imgs/tu3.png'
import logo4 from '../imgs/tu4.png'
import logo5 from '../imgs/tu5.png'
import logo6 from '../imgs/tu6.png'
import logo7 from '../imgs/tu7.png'
import logo8 from '../imgs/tu8.png'
import logo9 from '../imgs/tu9.png'
import logo10 from '../imgs/tu10.png'
import { List1 } from '../utils/aip'

import './List.scss'

class List extends Component {
    constructor(props) {
        super(props);
        this.state = { //定义组件状态
            arr: [
                // { name: '护肤', pic: logo },
                // { name: '彩妆', pic: logo2 },
                // { name: '香氛', pic: logo3 },
                // { name: '进口酒', pic: logo4 },
                // { name: '国产酒', pic: logo5 },
                // { name: '精品奢货', pic: logo6 },
                // { name: '食品百货', pic: logo7 },
                // { name: '母婴专区', pic: logo8 },
                // { name: '直播专区', pic: logo9 },
                // { name: '特卖专场', pic: logo10 },
            ]
        }
    }
    componentDidMount() {
        List1().then((ok) => {
            // console.log(ok.data)
            this.setState(this.state.arr = ok.data.list)

        })
    }
    render() {
        return (
            <div className='list'>
                {
                    // 列表渲染, 使用js中的map函数
                    this.state.arr.map((item, i) => {
                        return (
                            <div className="cate">
                                <img src={item.pic} alt="" />
                                <div className="name"> {item.name} </div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;